<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { RouteRow } from "@renderer/types/route";
import { routes } from "@renderer/router";
const router = useRouter();
const menuList = ref<RouteRow[]>([]);
const menuActive = ref<string>("");
const isCollapse = ref<boolean>(false);
onMounted(() => {
  const { path } = router.currentRoute.value;
  menuActive.value = path === "/" ? "/workbenchClone" : path;
  menuList.value = routes.filter((routeItem) => routeItem.isMenu);
});
function onCollapse() {
  isCollapse.value = !isCollapse.value;
}
function goUrl(item: RouteRow) {
  const { path } = item;
  router.push(path);
}
</script>
<template>
  <el-aside class="bg-[#000c17] text-white flex flex-col" width="auto">
    <el-menu
      class="flex-1 overflow-y-auto overflow-x-hidden menu-list"
      :default-active="menuActive"
      :collapse="isCollapse"
    >
      <template v-for="item in menuList" :key="item.path">
        <el-sub-menu v-if="item.children?.length" :index="item.path">
          <template #title>
            <i v-if="item.icon" :class="`iconfont ${item.icon} text-[20px] mr-[6px]`"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="childItem in item.children"
              :key="childItem.path"
              :index="childItem.path"
              >{{ childItem.name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item v-else :to="{ path: item.path }" :index="item.path" @click="goUrl(item)">
          <i v-if="item.icon" :class="`iconfont ${item.icon} text-[20px] mr-[6px]`"></i>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    <div
      class="h-[40px] flex justify-center items-center py-[10px] cursor-pointer"
      @click="onCollapse"
    >
      <i class="iconfont icon-zhankaicaidan text-[20px]"></i>
    </div>
  </el-aside>
</template>
<style lang="scss" scoped>
.menu-list:not(.el-menu--collapse) {
  width: 200px;
  min-height: 300px;
}
</style>
